<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span @click="tableshow" class="hand" :class="{'textactive' : !secondshow}">{{title}}</span>
          <span v-if="secondshow" :class="{'textactive' : secondshow}">> {{secondtitle}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable" v-show="!addShow">
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <div style="margin-bottom:20px;float: right;">
            <el-row type="flex" justify="space-between" style="margin-top: 11px;" class="btn">
              <el-input
                style="width: 136px;"
                size="small"
                placeholder="请输入内容"
                @keyup.enter.native="search"
                v-model.trim="searchword"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  style="cursor: pointer;"
                  @click="search"
                ></i>
              </el-input>
              <div style="margin-left: 5px;">
                <el-button
                  class="add"
                  :class="{'active' : newcolor}"
                  size="small"
                  @mousedown.native="adddown"
                  v-if="addBool"
                  @mouseup.native="addup"
                  @click="addshow"
                  round
                >新增</el-button>
                <el-button
                  class="edit"
                  @mousedown.native="editdown"
                  @mouseup.native="editup"
                  v-if="editBool"
                  @click="edit()"
                  :class="{'active1' : newcolor1}"
                  size="small"
                  round
                >修改</el-button>
                <el-button
                  class="delete"
                  @mousedown.native="deletedown"
                  @mouseup.native="deleteup"
                  v-if="deleteBool"
                  @click="deletedata"
                  :class="{'active2' : newcolor2}"
                  size="small"
                  round
                >删除</el-button>
              </div>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableData"
            @current-change="handleCurrentChange"
          >
            <el-table-column label="客户简称">
              <template slot-scope="scope">
                <span v-if="scope.row.testWater == '是'">
                  <i class="iconfont icon-shuidi"></i>
                </span>
                <span v-if="scope.row.customerActive == '是'">
                  <i class="iconfont icon-huo"></i>
                </span>
                <span style="cursor: pointer" @click="viewdetail(scope.row)">{{scope.row.cname}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="addrName" label="办公地点" width="380"></el-table-column>
            <el-table-column label="销售姓名">
              <template slot-scope="scope">
                <span v-if="scope.row.salesName">{{scope.row.salesName}}</span>
                <span v-if="!scope.row.salesName">无</span>
              </template>
            </el-table-column>
            <el-table-column label="销售电话">
              <template slot-scope="scope">
                <span v-if="scope.row.salesPhone">{{scope.row.salesPhone}}</span>
                <span v-if="!scope.row.salesPhone">无</span>
              </template>
            </el-table-column>
            <el-table-column label="销售邮箱">
              <template slot-scope="scope">
                <span v-if="scope.row.mail">{{scope.row.mail}}</span>
                <span v-if="!scope.row.mail">无</span>
              </template>
            </el-table-column>
            <el-table-column label="客户联系人">
              <template slot-scope="scope">
                <span v-if="scope.row.manName">{{scope.row.manName}}</span>
                <span v-if="!scope.row.manName">无</span>
              </template>
            </el-table-column>
            <el-table-column label="联系人电话">
              <template slot-scope="scope">
                <span v-if="scope.row.manPhone">{{scope.row.manPhone}}</span>
                <span v-if="!scope.row.manPhone">无</span>
              </template>
            </el-table-column>
            <el-table-column label="联系人邮箱">
              <template slot-scope="scope">
                <span v-if="scope.row.manMail">{{scope.row.manMail}}</span>
                <span v-if="!scope.row.manMail">无</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="负责助理"></el-table-column>
          </el-table>

          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--添加组件-->
    <div v-if="type == 1">
      <employ-add ref="employAdd" v-show="addShow" @getData="getdata1" @getData1="getdata"></employ-add>
    </div>
    <!--详情组件-->
    <div v-if="type == 2">
      <employ-detail :detail-code="detailcode" v-show="addShow"></employ-detail>
    </div>
    <!--修改组件-->
    <div v-if="type == 3">
      <employ-edit ref="employEdit" :current-data="currentRow" v-show="addShow" @getData="getdata"></employ-edit>
    </div>

    <el-dialog
      title="删除简历"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="deleteClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">确定删除该客户吗？</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" :disabled="deletedis" round @click="deletesend">确 定</el-button>
        <el-button round @click="deleteClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="错误"
      :visible.sync="editdialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何客户</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleClose">确 定</el-button>
        <el-button round @click="handleClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
import EmployAdd from "./employadd.vue";
import EmployDetail from "./employdetail.vue";
import EmployEdit from "./employedit.vue";

export default {
  name: "employunitset",
  data() {
    return {
      title: "",
      newcolor: false,
      secondtitle: "",
      secondshow: false,
      newcolor1: false,
      newcolor2: false,
      searchword: "",
      tableData: [],
      currentPage: 1,
      pagesize: 15,
      totalcount: null,
      addShow: false,
      currentRow: null,
      dialogVisible: false,
      editdialogVisible: false,
      detailcode: "",
      type: null,
      deletedis: false,
      addBool: false,
      editBool: false,
      deleteBool: false
    };
  },
  created() {
    this.title = this.$route.meta.title;

    this.getdata();

    axios
      .post(this.url + "/auth/getModularByMenu", {
        menuId: 29
      })
      .then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          if (res.data.data.length == 0) {
            this.addBool = false;
            this.editBool = false;
            this.deleteBool = false;
          } else {
            for (let i = 0, len = res.data.data.length; i < len; i++) {
              if (res.data.data[i].modularId == "1011") {
                this.addBool = true;
              } else if (res.data.data[i].modularId == "1012") {
                this.editBool = true;
              } else if (res.data.data[i].modularId == "1013") {
                this.deleteBool = true;
              } else {
                this.addBool = false;
                this.editBool = false;
                this.deleteBool = false;
              }
            }
          }
        }
      });
  },
  methods: {
    //获取表格数据
    getdata() {
      var form = {
        condition: this.searchword,
        pageNum: this.currentPage,
        pageSize: this.pagesize
      };
      axios.post(this.url + "/employ/getEmployerList", form).then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.tableData = res.data.data.list;
          this.totalcount = res.data.data.total;
          // document.documentElement.scrollTop = document.body.scrollTop = 0;
        }
      });
      this.addShow = false;
      this.secondshow = false;
    },
    getdata1() {
      this.currentPage = 1;
      var form = {
        condition: this.searchword,
        pageNum: this.currentPage,
        pageSize: this.pagesize
      };
      axios.post(this.url + "/employ/getEmployerList", form).then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.tableData = res.data.data.list;
          this.totalcount = res.data.data.total;
          // document.documentElement.scrollTop = document.body.scrollTop = 0;
        }
      });
      this.addShow = false;
      this.secondshow = false;
    },
    //查找
    search() {
      this.currentPage = 1;
      var form = {
        condition: this.searchword,
        pageNum: this.currentPage,
        pageSize: this.pagesize
      };
      axios.post(this.url + "/employ/getEmployerList", form).then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.tableData = res.data.data.list;
          this.totalcount = res.data.data.total;
        }
      });
    },
    adddown() {
      this.newcolor = true;
    },
    addup() {
      this.newcolor = false;
    },
    //展示新增客户的表单,隐藏表格
    addshow() {
      this.addShow = !this.addShow;
      this.secondtitle = "新增客户";
      this.secondshow = true;
      this.type = 1;
      if (this.$refs.employAdd) {
        this.$refs.employAdd.initdata();
        this.$refs.employAdd.resetFields("form");
      }
    },
    editdown() {
      this.newcolor1 = true;
    },
    editup() {
      this.newcolor1 = false;
    },
    //删除弹出框
    deletedata(row) {
      if (this.currentRow == null) {
        document.documentElement.style.overflow = "hidden";
        this.editdialogVisible = !this.editdialogVisible;
      } else {
        document.documentElement.style.overflow = "hidden";
        this.dialogVisible = true;
        this.deletedis = false;
      }
    },
    //发送删除请求
    deletesend() {
      this.dialogVisible = false;
      this.deletedis = true;
      axios
        .post(
          this.url + "/employ/delEmployer",
          qs.stringify({
            id: this.currentRow.id
          })
        )
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.dialogVisible = false;
            this.deletedis = false;
            this.currentPage = 1;
            this.getdata();
            document.documentElement.style.overflow = "auto";
          }
        });
    },
    deletedown() {
      this.newcolor2 = true;
    },
    deleteup() {
      this.newcolor2 = false;
    },
    //修改表格分页的展示条数
    handleSizeChange(val) {
      this.pagesize = val;
      this.getdata();
    },
    //修改表格分页的当前页
    pagehandleCurrentChange(val) {
      this.currentPage = val;
      this.getdata();
    },
    //展示表格,隐藏表单
    tableshow(row) {
      this.addShow = false;
      this.secondshow = false;
      this.$refs.singleTable.setCurrentRow(row);
      this.type = null;
      this.currentrow = null;
      this.getdata();
    },
    //elementUI的表格事件,获取当前表格行的数据
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    //关闭未选择客户的弹出框
    handleClose(done) {
      this.editdialogVisible = false;
      document.documentElement.style.overflow = "auto";
    },
    //关闭删除弹出框
    deleteClose() {
      this.dialogVisible = false;
      document.documentElement.style.overflow = "auto";
    },
    //查看详情
    viewdetail(val) {
      this.detailcode = val;
      this.addShow = !this.addShow;
      this.secondtitle = "查看客户";
      this.secondshow = !this.secondshow;
      this.type = 2;
    },
    //修改用人单位
    edit() {
      if (this.currentRow == null) {
        document.documentElement.style.overflow = "hidden";
        this.editdialogVisible = !this.editdialogVisible;
      } else {
        document.documentElement.style.overflow = "auto";
        this.addShow = !this.addShow;
        this.secondtitle = "修改客户";
        this.secondshow = !this.secondshow;
        this.type = 3;
        if (this.$refs.employEdit) {
          this.$refs.employEdit.resetFields("form");
          this.$refs.employEdit.getdetail();
        }
      }
    }
  },
  watch: {
    searchword: function(val) {
      if (val == "") {
        this.currentPage = 1;
        this.getdata();
      }
    }
  },
  components: {
    EmployAdd,
    EmployDetail,
    EmployEdit
  }
};
</script>
<style scoped>
.title {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.posttable {
  min-height: 700px;
  background-color: #fff;
}

.add {
  width: 65px;
  height: 28px;
  padding: 7px 15px !important;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
}

.add:hover {
  color: #fff !important;
}

.add:focus {
  color: #fff !important;
}

.edit {
  width: 65px;
  height: 28px;
  padding: 7px 15px !important;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
}

.edit:hover {
  color: #fff !important;
}

.edit:focus {
  color: #fff !important;
}

.delete {
  width: 65px;
  height: 28px;
  padding: 7px 15px !important;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #2f61ac 0%, #314159 100%);
}

.delete:hover {
  color: #fff !important;
}

.delete:focus {
  color: #fff !important;
}

.active {
  background: linear-gradient(to bottom, #595dff 0%, #7073ff 100%);
}

.active1 {
  background: linear-gradient(to bottom, #1cf1e3 0%, #379b94 100%);
}

.active2 {
  background: linear-gradient(to bottom, #5a7cae 0%, #4e87dc 100%);
}

.pager {
  margin-top: 20px;
}

.pager {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}

.el-pagination {
  margin-left: 50%;
  transform: translateX(-50%);
}

.textactive {
  color: #1099ff;
}

.left {
  margin-bottom: 10px;
}

@media screen and (min-width: 1200px) and (max-width: 1900px) {
  .left {
    padding-left: 2px;
    margin-left: 8.33333% !important;
  }

  .right {
    padding-left: 2px;
    margin-left: 4.16667% !important;
  }
}

@media screen and (min-width: 1910px) and (max-width: 1920px) {
  .right {
    padding-left: 5px;
  }
}
</style>
